<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        .tp {
            font-family: 微软雅黑;
            background-color: antiquewhite;
            color: darkorange;
        }
        #text3{
            font-family: 微软雅黑;
            color: darkmagenta;
        }
    </style>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<br/>
<fieldset><legend><h4>作用与示例</h4></legend>
    <p>ID选择器是指先给属性标签用ID命名，然后针对这个ID命名来编写不同的样式效果</p>
    <p>代码示例：<pre>    &lt;style type="text/css"&gt;
       #text3{
            font-family: 微软雅黑;
            color: darkmagenta;
        }
        &lt;/style&gt;
        &lt;input class="tp" type="text" value="我是text1"&gt;
        &lt;input class="tp" type="text" value="我是text2"&gt;
        &lt;input id="text3" class="tp" type="text" value="我是text3"&gt;
    </pre></p>
    <p>代码效果：<input class="tp" type="text" value="我是text1">
    <input class="tp" type="text" value="我是text2">
    <input id="text3" class="tp" type="text" value="我是text3">

    </p>
    <hr/>
    <p>补充：</p>
    <p>作用：ID选择器需要先用ID定义一个名字，然后在定义的ID的名字前面加“#”，才能编写ID选择器的样式</p>
    <p>ID选择器可以覆盖全局选择器的样式效果，也可以覆盖标签选择器的样式效果，同样可以覆盖类选择器的样式效果，具有优先级别</p>
    <p>（如页面中类选择器设置的字体颜色为橙色，而ID选择器设置的字体颜色为紫色，text3标签显示ID选择器的样式效果）</p>

</fieldset>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>


</body>
</html>